import React, { useEffect, useState } from 'react'
import './index.less'
import Xuanze from '../components/xuanze';
import Sijuan from '../components/sijuan';
import { Button, Carousel, Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import My from '../components/my';
import SecurityService from '@/pages/login/service';
import { EditObject, Login } from './login';
import logo_1 from '@/images/bj.png';
import carousel_1 from '@/images/carousel_1.jpg';
import carousel_2 from '@/images/carousel_2.jpg';
import carousel_3 from '@/images/carousel_3.jpg';
import carousel_4 from '@/images/carousel_4.jpg';
import carousel_5 from '@/images/carousel_5.jpg';
import carousel_6 from '@/images/carousel_6.png';

export default function index() {
      
    const [key, setkey] = useState(0)
    const [currentEditObject, setCurrentEditObject] =
    React.useState<EditObject>({
      isModalVisible: false,
    });

    useEffect(() => {
        return () => {
        //   console.log('结束')
        //   SecurityService.DeleteSecurity();
        }
      }, [])
    
    return (
        <>
        <div className='container'>
            <header className='header'>
            <Menu  mode="horizontal" theme='dark'>
                <Menu.Item key="mail" icon={<MailOutlined />} onClick={()=>{
                    setkey(0)
                }}>
                    首页
                </Menu.Item>
               
                {/* <Menu.Item key="app" icon={<AppstoreOutlined />}>
                    
                    {SecurityService.getSecurity()?
                    <Button type='link' onClick={()=>{setkey(1)}}>我的试卷</Button>:
                    <Button type='link' onClick={()=>{setCurrentEditObject({isModalVisible:true})}} >我的试卷</Button>}
                </Menu.Item> */}

                <Menu.Item key="my" >
                    {SecurityService.getSecurity()?
                    <Button type='link' onClick={()=>{setkey(2)}}>我的</Button>:
                    <Button type='link' onClick={()=>{setCurrentEditObject({isModalVisible:true})}} >请先登录</Button>}
                </Menu.Item>
            </Menu>
            </header>
            <section className='section'>
                <div className='carousel'>
                    <Carousel autoplay>
                        <div>
                         <img src={carousel_1} />
                        </div>
                        <div>
                        <img src={carousel_2} />
                        </div>
                        <div>
                        <img src={carousel_3} />
                        </div>
                        <div>
                        <img src={carousel_4} />
                        </div>
                        <div>
                        <img src={carousel_5} />
                        </div>
                        <div>
                        <img src={carousel_6} />
                        </div>
                    </Carousel>
                </div>
                <div className='contents'>
                 {key==0?<Xuanze></Xuanze>:key==1?<Sijuan></Sijuan>:<My></My>}
                </div>
            </section>
            <footer className='footer'>haolaoshi@haolaoshi</footer>
            <Login editObject={currentEditObject}></Login>
        </div> 
        </>
    )
}
